import { createRouter, createWebHistory } from 'vue-router'
import { ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'

import Login from '@/components/Login.vue'
import HelloWorld from '@/components/hello-world/index.vue'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import testRef from '@/components/testRef.vue'
import TestProxy from '@/components/TestProxy.vue'
import TestStore from '@/components/TestStore2.vue'
import computedWatch from '@/components/computed-watch/index.vue'
import Examples from '@/components/examples/index.vue'

// import TestMixins from '@/components/TestMixins.vue'
// 测试路由懒加载打包时单独打成一个js文件
const TestMixins = () => import('@/components/TestMixins.vue')

const routes = [
  {
    path: '/login',
    component: Login,
  },
  {
    path: '/helloWorld',
    component: HelloWorld,
    meta: {
      auth: true, //需要登录鉴权
    },
  },
  {
    path: '/home',
    component: Home,
  },
  {
    path: '/about',
    component: About,
  },
  {
    path: '/testRef',
    component: testRef,
  },
  {
    path: '/testProxy',
    component: TestProxy,
  },
  {
    path: '/testStore',
    component: TestStore,
  },
  {
    path: '/computed-watch',
    component: computedWatch,
  },
  {
    path: '/test-mixins',
    component: TestMixins,
  },
	{
	  path: '/v-model',
	  component: () => import('@/components/v-model/index.vue'),
	},
	{
	  path: '/examples',
	  component: Examples,
		children: [
			{
				path: '/examples/grid',
				component: () => import('@/components/examples/grid/index.vue'),
			},
			{
				path: '/examples/tree',
				component: () => import('@/components/examples/tree/index.vue'),
			},
			{
				path: '/examples/svg',
				component: () => import('@/components/examples/svg/index.vue'),
			},
			{
				path: '/examples/modal',
				component: () => import('@/components/examples/modal/index.vue'),
			},
			{
				path: '/examples/timer',
				component: () => import('@/components/examples/timer/index.vue'),
			},
			{
				path: '/examples/crud',
				component: () => import('@/components/examples/crud/index.vue'),
			},
			// 默认进入/grid子路由
			{
			  path: '/examples',
			  redirect: '/examples/grid',
			},
		]
	},
	
  // 默认进入/home
  {
    path: '/',
    redirect: '/home',
  },
  // 找不到匹配路由重定向到/home
  {
    path: '/:pathMatch(.*)',
    redirect: '/home',
  },
]
const router = createRouter({
  history: createWebHistory(),
  routes,
})

const handleRouterNext = (to, from, next) => {
  //需要登录鉴权的路由
  if (to?.meta?.auth) {
    // 通过user模拟用户登录信息
    if (sessionStorage.getItem('user')) {
      next()
    } else {
      next('/login?redirect=' + to.fullPath)
    }
  } else {
    next()
  }
}

router.beforeEach((to, from, next) => {
  // isSaveFlag-切换路由前是否有未保存的内容,实际业务从全局store获取
  let isSaveFlag = ref(false)
  if (isSaveFlag.value) {
    ElMessageBox.confirm('content have not save,do you want to save?')
      .then(() => {
        // 执行save操作后再进行下一步操作
        // ...
        ElMessage({
          message: '保存成功',
          type: 'success',
        })
        handleRouterNext(to, from, next)
      })
      .catch(() => {
        ElMessage({
          message: '取消保存',
          type: 'warning',
        })
        handleRouterNext(to, from, next)
      })
  } else {
    handleRouterNext(to, from, next)
  }
  // console.log(to, from, next)
})

export default router
